<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>


<!--  jquery -->
<script src="../js/jquery-1.8.1.js"></script>

<!--  jquery UI-->
<script src="../ui/jquery.ui.core.js"></script>
<script src="../ui/jquery.ui.widget.js"></script>
<script src="../ui/jquery.ui.mouse.js"></script>
<script src="../ui/jquery.ui.draggable.js"></script>
<script src="../ui/jquery.ui.sortable.js"></script>

<!-- Fancy box -->
<script type="text/javascript" src="../js/jquery.fancybox.js"></script>
<link rel="stylesheet" href="../css/jquery.fancybox.css" type="text/css"
	media="screen" />

<!-- Code Mirror -->
<script src="../js/codemirror.js"></script>
<script src="../js/xml.js"></script>
<link rel="stylesheet" href="../css/codemirror.css">



<script type="text/javascript">
	$(document).ready(function() {
		var buildlist = "<ul id='sortable'>";

		$.post("../connectors/milestoneConnector.jsp", function(data) {
			$.each(data, function(index, element) {
				var list = constructListForSortable(index, data);
				buildlist += list;
			});
			buildlist = buildlist + "</ul>";
			//alert(buildlist);
			$("#listdiv").html(buildlist);
			$("#sortable").sortable();
			$("a.fancybox11").each(function() {
				var element = this;
				$(this).fancybox({
					'titleFormat' : function() {
						var astring = '<span>' + element.id + '</span>';
						return astring;
					}
				});

			});

			$("a.reflow").click(function(e) {
				e.preventDefault();
				//alert($(this).attr('href'));
				postMilestones($(this).attr('href') );
			});

			//formatXML();
		});
		reload();
		showAllXml();
		hideAllXml();
	});

	function constructListForSortable(index, data) {
		var milestoneID = data[index].mileStoneID;
		var constructAnchorTag = constructAnchorTagForSortableList(index, data);
		var constructTextArea = constructTextAreaForSortableList(index, data);
		var list = "<li id='listtasks_"+milestoneID+"'>"
				+ data[index].mileStoneName + constructAnchorTag
				+ constructTextArea + "</li>";

		//alert(list);
		return list;
	}

	function constructAnchorTagForSortableList(index, data) {
		var milestoneID = data[index].mileStoneID;
		//var anchor = "<a href='text_"+milestoneID+"' class='fancybox11'> " + milestoneID + "</a>";
		var anchor = "<a href='#text_"+milestoneID+"' class='fancybox11'> Edit</a>";
		anchor += "|<a href='"+milestoneID+"' class='reflow' >Reflow</a>";
		//anchor+="|<a href='#text_"+milestoneID+"' class='fancybox11'>Reflow</a>";
		return anchor;
	}

	function constructTextAreaForSortableList(index, data) {
		var milestoneID = data[index].mileStoneID;

		var textArea = "<div  style='display: none;' id='text_"+milestoneID+"' class='reflowdiv' > <textarea rows='30' cols='55' id='textarea_"+milestoneID+"'>"
				+ data[index].mileStoneXML
				+ "</textarea> <input type='button' value='Save Edits' id='btnSaveEdits' onclick='HideTextArea(event);'/><input type='button' value='Cancel Edits' id='btnCancelEdits'  onclick='DoCleanUp();'/></div>";
		return textArea;
	}
	
	function postMilestones(milestoneID)
	{
		var xmlContent = $("#textarea_"+milestoneID).val();
		alert(xmlContent);
			$.post("PostMilestones.jsp", { milestoneID: milestoneID, xmlContent: xmlContent },
			        function(data) {
					alert("posted");
					});
	}
	
	function reload()
	{
		$('#reloadAll').click(function() {
    	location.reload();
		});
	}
	
	function showAllXml()
	{
	
		$('#showallxml').click(function() {
			alert("show");
			$("div.reflowdiv").each(function() {
				var element = this;
				var textid = element.id;
				$("#"+textid).show("slow");
			});
		});
		
	}
	
	function hideAllXml()
	{
	
		$('#hideallxml').click(function() {
			alert("show");
			$("div.reflowdiv").each(function() {
				var element = this;
				var textid = element.id;
				$("#"+textid).hide("slow");
			});
		});
		
	}

	/*function formatXML() {
		var editor = CodeMirror.fromTextArea(document.getElementById("text_1"), {
			mode : {
				name : "xml",
				alignCDATA : true
			},
			lineNumbers : true
		});
	}*/
</script>


</head>
<body>

	<div id="listdiv"></div>
	<div id="buttons">
	<input type="button" id="showallxml" value="Show All xml"/>
	<input type="button" id="hideallxml" value="Hide All xml"/>
	<input type="button" id="reloadAll" value="Reload All"/>
	
	
	</div>

</body>
</html>